<template>
  <div class="configuredRule">
    <el-card shadow="hover" class="card-search">
      <el-row>
        <el-col :span="20">
          <div class="search_detail">
            <div class="search">
              <span class="span_name">门店名称：</span>
              <el-input v-model="state.params.businessName" placeholder="请输入" clearable />
            </div>
            <div class="search">
              <span class="span_name">省市区：</span>
              <el-select v-model="state.params.provinceName" @change="changeCity($event, 0)" placeholder="请选择省">
                <el-option v-for="item in state.city.pasOptions" :key="item.name" :label="item.name" :value="item.name" />
              </el-select>
              -
              <el-select v-model="state.params.cityName" @change="changeCity($event, 1)" placeholder="请选择市">
                <el-option v-for="item in state.city.cityOptions" :key="item.name" :label="item.name"
                  :value="item.name" />
              </el-select>
              -
              <el-select v-model="state.params.areaName" @change="changeCity($event, 2)" placeholder="请选择区">
                <el-option v-for="item in state.city.areaOptions" :key="item.name" :label="item.name"
                  :value="item.name" />
              </el-select>
              <!-- <el-date-picker v-model="state.time" type="datetimerange" range-separator="~" start-placeholder="开始时间"
                end-placeholder="结束时间" /> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover" class="card-main">
      <el-button type="primary" @click="save">新增门店</el-button>
      <el-table :data="state.tableData" stripe style="width: 100%">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column prop="businessName" label="门店名称" width="180" />
        <el-table-column prop="repairer" label="维修人员" width="220" />
        <el-table-column prop="repairerPhone" label="人员手机" width="220" />
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.provinceName }}
            {{ scope.row.cityName }}
            {{ scope.row.areaName }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="300px">
          <template #default="scope">
            <el-button type="primary" size="small" @click="update(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="state.totalPage"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog v-model="state.dialogVisible" title="门店信息" width="30%" :before-close="handleClose">
      <div class="inputa">
        <div class="searcha">
          <span class="span_name">门店名称：</span>
          <el-input v-model="state.diaCity.businessName" placeholder="请输入" clearable />
        </div>
        <div class="searcha">
          <span class="span_name">维修人员：</span>
          <el-input v-model="state.diaCity.repairer" placeholder="请输入" clearable />
        </div>
        <div class="searcha">
          <span class="span_name">人员手机：</span>
          <el-input v-model="state.diaCity.repairerPhone" placeholder="请输入" clearable />
        </div>
        <br>
        <div class="searcha">
          <span class="span_name">省市区：</span>
          <el-select v-model="state.diaCity.value1" @change="changeDiaCity($event, 0)" placeholder="请选择省">
            <el-option v-for="item in state.diaCity.pasOptions" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
          -
          <el-select v-model="state.diaCity.value2" @change="changeDiaCity($event, 1)" placeholder="请选择市">
            <el-option v-for="item in state.diaCity.cityOptions" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
          -
          <el-select v-model="state.diaCity.value3" @change="changeDiaCity($event, 2)" placeholder="请选择区">
            <el-option v-for="item in state.diaCity.areaOptions" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </div>
        <div>
          <el-icon :size="15">
            <Warning />
          </el-icon>
          <span class="txt2">如维修人员暂时联系不到，可自行添加客服微信，留言：门店，房间号，联系方式，由客服人员跟进处理维修。</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveList"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { Delete, Search, Warning } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import areas from '@/assets/areas.json'
const { proxy } = getCurrentInstance();

const state = reactive({
  city: {
    value1: '',
    value2: '',
    value3: '',
    pasOptions: areas,
    cityOptions: [],
    areaOptions: [],
  },
  name: '',
  time: '',
  tableData: [
  ],
  is: 0,
  page: 1,
  totalPage: '',
  dialogVisible: false,
  dialogRow: {},
  diaCity: {
    id: '',
    businessName: '',
    repairer: '',
    repairerPhone: '',
    value1: '',
    value2: '',
    value3: '',
    pasOptions: areas,
    cityOptions: [],
    areaOptions: [],
  },
  params: {
    businessName: '',
    provinceName: '',
    cityName: '',
    areaName: '',
  }

})

const getData = async (params) => {
  let res = await proxy.$api.home.list({
    page: params, limit: 10,
    businessName: state.params.businessName,
    provinceName: state.params.provinceName,
    cityName: state.params.cityName,
    areaName: state.params.areaName,
  })
  state.tableData = res.page.list
  state.totalPage = res.page.totalCount
}
getData(state.page)

const search = () => {
  console.log('state', state.params);
  console.log('state', state.params);
  getData(state.page)
}

const reast = () => {
  state.params = {
    businessName: '',
    provinceName: '',
    cityName: '',
    areaName: '',
  }
  getData(state.page)
}

const handleCurrentChange = (e) => {
  console.log('r', e);
  state.page = e
  getData(e)
}
const changeCity = (e, index) => {
  switch (index) {
    case 0:
      areas.map((item) => {
        if (item.name == e) {
          state.city.cityOptions = item.areas
          state.params.cityName = ''
        }
      })
      break;
    case 1:
      state.city.cityOptions.map((item) => {
        if (item.name == e) {
          state.city.areaOptions = item.areas
          state.params.areaName = ''
        }
      })
      break;
  }
}
const changeDiaCity = (e, index) => {
  console.log('eeee=======', e);
  switch (index) {
    case 0:
      areas.map((item) => {
        if (item.name == e) {
          state.diaCity.cityOptions = item.areas
          state.diaCity.value2 = ''
        }
      })
      break;
    case 1:
      state.diaCity.cityOptions.map((item) => {
        if (item.name == e) {
          state.diaCity.areaOptions = item.areas
          state.diaCity.value3 = ''
        }
      })
      break;
  }
}
const save = async () => {
  state.dialogVisible = true
  state.is = 0
}
const update = (e) => {
  state.dialogRow = e
  console.log('e', e);
  state.dialogVisible = true
  state.is = 1
  state.diaCity.id = e.id
  state.diaCity.repairer = e.repairer
  state.diaCity.repairerPhone = e.repairerPhone
  state.diaCity.businessName = e.businessName
  state.diaCity.value1 = e.provinceName
  state.diaCity.value2 = e.cityName
  state.diaCity.value3 = e.areaName
  areas.map((item) => {
    if (item.name == e.provinceName) {
      console.log('item ', item);
      state.diaCity.cityOptions = item.areas
      state.diaCity.value2 = ''
    }
  })
  state.diaCity.cityOptions.map((item) => {
    if (item.name == e.cityName) {
      console.log('item ', item);
      state.diaCity.areaOptions = item.areas
      state.diaCity.value3 = ''
    }
  })
  console.log('state.diaCity.', state.diaCity);
  // state.dialogRow = e
}
const deleteRow = async (e) => {
  console.log('e', e);
  ElMessageBox.confirm(
    '是否删除此门店以下所有信息?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      proxy.$api.home.delete([e.id]).then(res => {
        console.log('res', res);
        if (res) {
          ElMessage({
            type: 'success',
            message: '成功',
          })
          getData(1)
        }
      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const saveList = () => {
  console.log('state.is', state.is == 0);
  console.log('state.diaCity', state.diaCity);
  console.log('state.dialogRow', state.dialogRow);
  if (state.is == 0) {
    proxy.$api.home.save({ businessName: state.diaCity.businessName, repairer: state.diaCity.repairer, repairerPhone: state.diaCity.repairerPhone, provinceName: state.diaCity.value1, cityName: state.diaCity.value2, areaName: state.diaCity.value3 }).then(res => {
      console.log('res', res);
      if (res) {
        ElMessage({
          type: 'success',
          message: '添加成功',
        })
        state.dialogVisible = false
        state.page = 1
        getData(1)
      }
    })
  } else {
    proxy.$api.home.update({ businessName: state.diaCity.businessName, repairer: state.diaCity.repairer, repairerPhone: state.diaCity.repairerPhone, provinceName: state.diaCity.value1, cityName: state.diaCity.value2, areaName: state.diaCity.value3, id: state.dialogRow.id }).then(res => {
      console.log('res', res);
      if (res) {
        ElMessage({
          type: 'success',
          message: '修改成功',
        })
        state.dialogVisible = false
        state.page = 1
        getData(1)
      }
    })
  }

}
watch(
  () => state.dialogVisible,
  () => {
    if (state.dialogVisible == false) {
      state.dialogRow = {}
      state.diaCity = {
        value1: '',
        value2: '',
        value3: '',
        pasOptions: areas,
        cityOptions: [],
        areaOptions: [],
      }
    }

  }
)
</script>

<style lang="scss" scoped>
.txt2{
  color: #999;
}
.configuredRule {
  padding: 20px;
  font-size: 16px;

  .search_detail {
    display: flex;

    .search {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .span_name {
        width: 110px;
        font-size: 16px;
      }
    }
  }

  .card-main {
    margin-top: 20px;
    height: calc(100vh - 200px);
    position: relative;

    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      text-align: right;
    }
  }

}

.inputa {
  .searcha {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .span_name {
      width: 130px;
      font-size: 16px;
    }
  }
}
</style>